<template>
  <div class="my-brand">
    <div class="queryBox">
      <div class="row">
        <div class="left">
          <el-icon>
            <!-- <Search /> -->
          </el-icon>
          <span> 筛选搜索 </span>
        </div>
        <div class="right">
          <el-button type="primary" @click="searchHandle">查询结果</el-button>
        </div>
      </div>
      <div class="row">
        <span>输入搜索:</span>
        <el-input v-model="form.keyword" placeholder="品牌名称/关键字" />
      </div>
    </div>
    <div class="editUser">
      <div class="editUserLeft">
        <el-icon>
          <!-- <Tickets /> -->
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="editUserRight">
        <el-button
          type="primary"
          v-permission="'addRole'"
          @click="router.push('addBrand')"
          >添加</el-button
        >
      </div>
    </div>
    <el-table
      :data="list"
      style="width: 100%"
      border
      table-layout="auto"
      cell-class-name="align-c"
      ref="multipleTableRef"
      @select="handleSelectionChange"
      @select-all="handleSelectionAll"
    >
      <el-table-column type="selection" width="55" v-model="checkList" />
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="name" label="角色名称" />
      <el-table-column prop="firstLetter" label="品牌首字母" />
      <el-table-column prop="sort" label="排序" />

      <el-table-column #default="{ row }" label="品牌制作商" width="100">
        <el-switch
          v-model="row.factoryStatus"
          :active-value="1"
          :inactive-value="0"
          @change="changeFactoryStatus(row)"
        />
      </el-table-column>
      <el-table-column #default="{ row }" label="是否显示" width="100">
        <el-switch
          v-model="row.showStatus"
          :active-value="1"
          :inactive-value="0"
          @change="changeShowStatus(row)"
        />
      </el-table-column>
      <el-table-column prop="sort" label="相关">
        <template #default="{ row }">
          <span
            >商品：<span
              style="color: #409eff; padding-right: 5px; cursor: pointer"
              >100</span
            >评价：<span style="color: #409eff; cursor: pointer"
              >1000</span
            ></span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            v-permission="'allocResource'"
            size="small"
            @click="router.push('updateBrand?id=' + row.id)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="deleteId(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <div class="left">
        <el-select v-model="type" placeholder="批量操作">
          <el-option label="隐藏品牌" :value="0" />
          <el-option label="显示品牌" :value="1" />
        </el-select>

        <el-button type="primary" @click="determine">确定</el-button>
      </div>

      <ElConfigProvider :locale="zhCn">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageChangeHandle"
          @current-change="pageSizeChangeHandle"
        />
      </ElConfigProvider>
    </div>
  </div>
</template>
<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider, ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElTable } from "element-plus";
import useTable from "@/hooks/useTable";
// 请求接口
import {
  ApiBrandListAll,
  ApiBrandList,
  ApiFactoryStatus,
  ApiShowStatus,
  ApiDeleteId,
  ApiBrandId,
} from "./api";

const router = useRouter();
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const type = ref<0 | 1>();
const form = reactive({
  keyword: "",
});
// 封装
const {
  list,
  pageNum,
  pageSize,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
  searchHandle,
  fetch,
} = useTable(ApiBrandList, form);

const multipleSelection = ref<IBrandList[]>([]);
// 品牌制作商状态
const changeFactoryStatus = (row: IBrandList) => {
  ApiFactoryStatus(row.id, row.factoryStatus)
    .then((res) => {
      if (res.code === 200) {
        // 提示
        ElMessage.success("修改成功");
      } else {
        row.factoryStatus = row.factoryStatus === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      row.factoryStatus = row.factoryStatus === 1 ? 0 : 1;
    });
};
// 是否显示状态
const changeShowStatus = (row: IBrandList) => {
  ApiShowStatus(row.id, row.showStatus)
    .then((res) => {
      if (res.code === 200) {
        // 提示
        ElMessage.success("修改成功");
      } else {
        row.showStatus = row.showStatus === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      row.showStatus = row.showStatus === 1 ? 0 : 1;
    });
};
// 复选框
const checkList = ref<number[]>([]);
// 多选框选中事件
const handleSelectionChange = (val: IBrandList[]) => {
  val.forEach((item) => {
    const p = list.value.find((p) => p.id === item.id);
    p && checkList.value.push(item.id as any);
    console.log(checkList.value);
  });
};
// 点击确定
const determine = () => {
  if (checkList.value.length === 0) {
    ElMessage.warning("请选择一条记录");
  } else {
    if (type.value === 0) {
      ApiShowStatus(checkList.value, 0).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");

          fetch();
        }
      });
    } else if (type.value === 1) {
      ApiShowStatus(checkList.value, 1).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");

          fetch();
        }
      });
    }
  }
};
// 删除
const deleteId = (id: number) => {
  ElMessageBox.confirm("是否删除该品牌", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ApiDeleteId(id).then((res) => {
      if (res.code === 200) {
        // 提示
        ElMessage.success("删除成功");
        // 数据重新加载
        fetch();
      }
    });
  });
};
// 手动点击全选事件
const handleSelectionAll = (val: any[]) => {
  checkList.value = val.reduce((pre: number[], next: { id: number }) => {
    return pre.concat(next.id);
  }, []);
};
</script>
<style lang="less" scoped>
.queryBox {
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;

  .row {
    display: flex;
    padding: 10px 0;

    &:first-child {
      justify-content: space-between;
      align-items: center;
    }

    &:last-child {
      width: 400px;
      align-items: center;
      padding-left: 60px;
      font-size: 26px;
      span {
        font-size: 16px;
        width: 100px;
      }
    }
  }
}
.editUser {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  align-items: center;
}
.page {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  .left {
    :deep(.el-button) {
      margin-left: 20px;
    }
  }
}
</style>
